<template>
    <el-menu mode="horizontal" :router="true">
        <el-menu-item v-for="(item, index) in menus" :index="item.path" :key="index">
            <svg-icon :icon-class="item.meta.icon" style="margin-right: 8px;"/>
            {{ item.meta.title }}
        </el-menu-item>
    </el-menu>
</template>

<script setup name="CustomNav">
import usePermissionStore from '@/store/modules/permission'

const permissionStore = usePermissionStore()

const routers = computed(() => permissionStore.topbarRouters);

const menus = computed(() => {
    let topMenus = [];
    routers.value.map((menu) => {
        if (menu.hidden !== true) {
            // 兼容顶部栏一级菜单内部跳转
            if (menu.path === "/") {
                topMenus.push(menu.children[0]);
            }
        }
    })
    return topMenus;
})

</script>